<template>
  <div class="record-panel">
    <el-tabs :stretch="true">
      <el-tab-pane :label="'待结算 [' + toSettleList.length + ']'" name="0">
        <to-settle-record class="panel-item"></to-settle-record>
      </el-tab-pane>
      <el-tab-pane  :label="'预付款 [' + prePayList.length + ']'" name="1">
        <pre-pay-record class="panel-item"></pre-pay-record>
      </el-tab-pane>
      <el-tab-pane  :label="'已结算[' + saleFuelList.length + ']'" name="2">
        <sale-fuel-record class="panel-item"></sale-fuel-record>
      </el-tab-pane>
      <el-tab-pane :label="'便利店[' + saleCommodityList.length + ']'" name="3">
        <sale-commodity-record class="panel-item"></sale-commodity-record>
      </el-tab-pane>
      <el-tab-pane :label="'异常未收款[' + unpaidFuelList.length + ']'" name="4">
        <unpaid-settle-record class="panel-item"></unpaid-settle-record>
      </el-tab-pane>
    </el-tabs>
    <function-area class="function-area"></function-area>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import FunctionArea from './FunctionArea.vue'
import PrePayRecord from './PrePayRecord'
import SaleCommodityRecord from './SaleCommodityRecord.vue'
import SaleFuelRecord from './SaleFuelRecord.vue'
import ToSettleRecord from './ToSettleRecord.vue'
import UnpaidSettleRecord from './UnpaidSettleRecord'

var Mousetrap = require('mousetrap')
export default {
  name: 'RecordPanel',
  components: {
    ToSettleRecord,
    PrePayRecord,
    FunctionArea,
    SaleFuelRecord,
    SaleCommodityRecord,
    UnpaidSettleRecord
  },
  computed: {
    ...mapGetters([
      'toSettleList',
      'prePayList',
      'saleFuelList',
      'saleCommodityList',
      'saleFuelRecordVisible',
      'unpaidFuelList',
      'reportDialogVisible'

    ])
  },
  mounted () {
    this.bindKeyboard()
  },
  methods: {
    bindKeyboard () {
      Mousetrap.bind('~', () => {
        console.log('go go go ~')
        if (!this.reportDialogVisible) {
          this.$store.dispatch('showReportDialog')
        } else {
          this.$store.dispatch('hideReportDialog')
        }
      })
    }
  }
}
</script>
<style scoped>
.record-panel {
  width: 100%;
  height: 100%;
}

.panel-item {
  margin-bottom: 8px;
}

.function-area {
  height: 150px;
  background: white;
}
</style>
